/** * 订单退款 */
<template>
  <div>
    <UnifyTitle :leftmodel="true" @goReturn="goReturn"/>
    <div class="bgFFF bdradius4 pb76">
      <div class="datafoot">
        <Form ref="ruleValidate" :rules="ruleValidate" :label-width="80" :model="orderDetail">
          <div class="content1">
            <div class="text flex flex-y-center">
              <span class="ml20">基础信息</span>
            </div>
            <div class="input1" style="margin-bottom: 10px;">
              <Row type="flex" justify="start" align="middle" class="pt10">
                <Col span="8">
                  <FormItem prop="name" label="居民姓名">
                    <Input type="text" disabled placeholder="-" v-model="residentDetail.name"/>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem prop="phone" label="联系电话">
                    <Input type="text" disabled placeholder="-" v-model="residentDetail.phone"/></FormItem>
                </Col>
                <Col span="8">
                  <FormItem prop="orderNo" label="身份证号">
                    <Input type="text" placeholder="-" disabled clearable v-model="residentDetail.idCard"/>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem prop="orderStatus" label="缴费状态">
                    <Input type="text" disabled placeholder="-" :value="orderDetail.orderStatus == 1 ? '待支付' : (orderDetail.orderStatus == 2 ? '退款中' :
                    (orderDetail.orderStatus == 3 ? '退款成功' : (orderDetail.orderStatus == 4 ? '已缴费' : '订单取消')))"/></FormItem>
                </Col>
                <Col span="8">
                  <FormItem prop="orderNo" label="订单编号">
                    <Input type="text" placeholder="-" disabled clearable v-model="orderDetail.orderNo"/>
                  </FormItem>
                </Col>
              </Row>
            </div>
          </div>
          <div class="content1">
            <div class="text flex flex-y-center space-between">
              <span class="ml20">缴费信息</span>
              <span class="mr39"> </span>
            </div>
            <div class="input1">
              <Row type="flex" justify="start" align="middle">
                <Col span="8">
                  <FormItem label="缴费类型">
                    <Input type="text" disabled placeholder="-" :value="tabsName === 'yibaoorder' ? '医保' : '社保'"/>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem prop="orderAmount" label="缴费金额">
                    <Input type="text" disabled placeholder="-" :value="Number(orderDetail.orderAmount)/100"/>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem prop="payName" label="提交人">
                    <Input type="text" disabled placeholder="-" v-model="orderDetail.submitInfo"/>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem prop="createDate" label="提交时间">
                    <Input type="text" disabled placeholder="-" v-model="orderDetail.createDate"/>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem prop="payDate" label="缴费时间">
                    <Input type="text" disabled placeholder="-" v-model="orderDetail.payDate"/>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="start" align="middle">
                <Col span="16">
                </Col>
                <Col span="8">
                  <div class="deala">
                    缴费合计：￥{{ Number(orderDetail.orderAmount) / 100 }}
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </Form>
      </div>
      <div class="datafoot pb133">
        <Form ref="ruleValidate1" :rules="ruleValidate1" :label-width="80" :model="fromData1">
          <div class="content1">
            <div class="text flex flex-y-center">
              <span class="ml20">退款申请</span>
            </div>
            <div class="input1">
              <Row type="flex" justify="start" align="middle">
                <Col span="8">
                  <FormItem prop="orderAmount" label="已缴金额">
                    <Input type="text" disabled placeholder="-" :value="Number(orderDetail.orderAmount)/100"/>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem prop="returnAmount" label="退款金额">
                    <InputNumber v-model="fromData1.returnAmount" style="width:100%" :min="0"
                                 placeholder="请输入金额"></InputNumber>
                  </FormItem>
                </Col>
                <Col span="24" style="margin-top:5px">
                  <FormItem prop="remark" label="退款说明" style="width: 93%;">
                    <Input v-model="fromData1.remark" type="textarea" :rows="3" placeholder="请输入退款说明"/>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="start" align="middle">
                <Col span="16">
                </Col>
                <Col span="8">
                  <div class="deala">
                    退款金额：￥{{ fromData1.returnAmount }}
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </Form>
      </div>
    </div>

    <div class="footer1">
      <div>
        <Button @click="goReturn">返回</Button>
        <Button class="ml20" type="primary" @click="submitproBt">提交</Button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  data() {
    const validateNumber = (rule, value, callback) => {
      if (value == undefined || value == "") {
        callback(new Error("退款金额不能为空"));
      } else {
        if (value > Number(this.orderDetail.orderAmount) / 100) {
          callback(new Error("不能大于已缴的金额"));
        } else {
          callback();
        }
      }
    };
    return {
      tabsName: "",
      orderDetail: {},
      residentDetail: {},
      fromData1: {
        returnAmount:0,
        remark:'',
      },
      ruleValidate: {},
      //提交表单验证
      ruleValidate1: {
        returnAmount: [{
          required: true,
          validator: validateNumber,
          trigger: "change"
        },],
        remark: [{
          required: true,
          message: "请输入退款说明",
          trigger: "blur"
        },],
      },
    };
  },
  computed: {},
  created() {
    if (this.$route.params.orderDetail) {
      this.orderDetail = this.$route.params.orderDetail;
      this.getResidentDetail();
    }
    this.tabsName = this.$route.query.tabsName;
    this.fromData1.returnAmount = Number(this.orderDetail.orderAmount)/100
  },
  methods: {
    getResidentDetail() {
      // 居民详情
      this.APIS.residentDetail({id: this.orderDetail.payResidentId}).then((res) => {
        if (res.code == 20000) {
          this.residentDetail = res.data;
        } else {
          this.$Message.error(res.message)
        }
      });
    },
    // 提交数据
    submitproBt() {
      this.$refs["ruleValidate1"].validate((valid) => {
        if (valid) {
          this.$Modal.confirm({
            title: '提示',
            content: Number(this.orderDetail.orderAmount)/100 > this.fromData1.returnAmount ? '只能提交一次退单申请，确定退'+this.fromData1.returnAmount+'元吗？' : '点击确定提交退单申请。',
            onOk: () => {
              var datas = {
                id:this.orderDetail.id,
                reason:this.fromData1.remark,
                returnAmount:this.fromData1.returnAmount,
              }
              this.APIS.returnorder(datas).then((res) => {
                if(res.code == 20000){
                  this.$Message.success('提交成功')
                  setTimeout(() => {
						        this.$router.go(-1)
                  }, 500);
                }
              });
            },
          });
        }
      });
    },
    //回到订单
    goReturn() {
      this.$router.push({
        name: "peopleManagement",
        query: {
          tabsName: this.tabsName,
        },
        params: {
          orderStatus: this.$route.params.orderStatus,
        }
      })
    },
  },
};

</script>
<style lang="less" scoped>
.datafoot {
  width: 68.19%;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #fff;
}

.content1 {
  background: #ffffff;
  border: 1px solid #eeeeee;
  opacity: 1;
  border-radius: 4px;
  margin-top: 20px;
}

.text {
  border-bottom: 1px solid #eeeeee;
  line-height: 20px;
  color: #333333;
  padding: 10px 0;
}

.input1 {
  width: 76.91%;
  margin: 20px auto;
}

/deep/ .ivu-form-item {
  margin-bottom: 20px;
}

/deep/ .ivu-form-item, .deala {
  width: 79.11%;
}

.footer1 {
  width: 100%;
  height: 64px;
  background: #ffffff;
  box-shadow: 0px -3px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  z-index: 999;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.deala {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  line-height: 28px;
  color: #FF0000;
  text-align: right;
}

</style>
